<template>
  <div class="footer">
    <!-- This should be `0 items left` by default -->
    <span class="todo-count"><strong>{{unfinishCount}}</strong> item left</span>
    <!-- Remove this if you don't implement routing -->
    <ul class="filters">
      <li>
        <a href="#/"  :class="{selected: type === 'All'}" @click="change('All')">All</a>
      </li>
      <li>
        <a href="#/active" :class="{selected: type === 'Active'}" @click="change('Active')">Active</a>
      </li>
      <li>
        <a href="#/completed" :class="{selected: type === 'Completed'}" @click="change('Completed')">Completed</a>
      </li>
    </ul>
    <!-- Hidden if no completed items are left ↓ -->
    <button class="clear-completed" v-show="isShowClearComplated" @click="clearCompleted">Clear completed</button>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { bus } from './main.vue'
@Component
export default class Footer extends Vue {
  @Prop({ type: Number }) readonly unfinishCount!: number
  @Prop({ type: Boolean }) readonly isShowClearComplated!: boolean

  // @Emit('clearCompleted') clearCompleted () {}

  type = 'All'

  change (type: string) {
    this.type = type
    this.$emit('change', type)
  }

  clearCompleted () {
    bus.$emit('clearCompleted')
  }

  created () {
    this.change('All')
  }
}
</script>

<style>

</style>
